<template>
  <div>
    <n-card class="componentListCard" style="height: 100%;width:100%;position: relative" content-style="width:100%;">
        <div style="z-index: 2;position: relative">
          <n-select
            v-model:value="componentLib"
            :consistent-menu-width="false"
            :options="options"
            :render-label="renderLabel"
            :render-tag="renderSingleSelectTag"
            :on-update:value="libChange"
             style="padding-left: 0px;margin-bottom: 30px"
          />
        </div>
      <div class="ListPanel" style="height:100%;width:100%;" @dragstart="handleDragStart">
        <n-space >
          <div v-for="(item,index) in  componentList" style="margin-left: -5px;" draggable :data-index="index">
          <HoverCard :item="item" :index="index"></HoverCard>
          </div>
        </n-space>
      </div>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import {NAvatar, NCard, type SelectRenderTag, type SelectRenderLabel, NText} from "naive-ui"
import HoverCard from "../core/hoverMoveCard/index.vue"
import {h, onMounted, type Ref, ref, type UnwrapRef} from "vue";
import {ComponentLibrary, getComponentByLibrary, getComponentList} from "@/basic/common/componentList.ts";
import naiveLogo from '@/assets/icons/naivelogo.svg';
import elementPlusLogo from '@/assets/icons/element-plus.svg';
import free from '@/assets/icons/free.webp';
import MittUtils from "@/utils/mitt/MittUtils.ts";
import {NaiveUiUtils} from "@/basic/common/naive-ui/utils.ts";
import {useEditorStore} from "@/stores/editorStore.ts";
// 动态生成反向映射对象
const reverseComponentLibrary = Object.fromEntries(
    Object.values(ComponentLibrary).map((value) => [value, value])
) as Record<string, ComponentLibrary>;
const editorStore=useEditorStore()
const enumValues = Object.values(ComponentLibrary); // 获取值
const options = ref([...enumValues.map((item, index) => {
  return{
    label: item,
    value: item
  }
})])
function getLibLogo(key:string){
  switch (key){
    case 'naive-ui':
      return naiveLogo
    case 'element-plus':
      return elementPlusLogo
    case 'custom':
      return free
  }
}
const renderSingleSelectTag: SelectRenderTag = ({ option }) => {
  return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        h(NAvatar, {
          src: getLibLogo(option.label as string),
          round: true,
          size: 24,
          style: {
            marginRight: '5px'
          }
        }),
        option.label as string
      ]
  )
}
const renderLabel: SelectRenderLabel = (option) => {
  return h(
      'div',
      {
        style: {
          paddingLeft:'0px',
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        h(NAvatar, {
          src: getLibLogo(option.label as string),
          round: true,
          objectFit:'cover',
          imgProps:{
            style:{
              width:'16px',
              height:'16px',
              marginLeft:'5px',
              marginTop:'5px'
            }
          },
          size: 'small'
        }),
        h(
            'div',
            {
              style: {
                marginLeft: '12px',
                padding: '4px 0'
              }
            },
            [
              h('div', null, [option.label as string]),
              h(
                  NText,
                  { depth: 1, tag: 'div' },
                  {
                    default: () => ''
                  }
              )
            ]
        )
      ]
  )
}
const componentLib=ref('naive-ui')
const componentList:Ref<UnwrapRef<any[]>, UnwrapRef<any[]> | any[]> = ref([])

const libChange = (e: string) => {
  componentLib.value = e;
  const libraryKey = reverseComponentLibrary[e];
  if (libraryKey) {
    componentList.value = getComponentByLibrary(libraryKey);
  } else {
    NaiveUiUtils.notification.error({title:'未找到匹配组件库',description:'e',duration: 1000})
  }
};
function  handleDragStart(e) {
  e.dataTransfer.setData('index', e.target.dataset.index)
}
onMounted(()=>{
  componentList.value=getComponentByLibrary(ComponentLibrary.NAIVE_UI)
})
const addComponent=(data)=>{
  editorStore.addComponent(componentList.value[data])
}
MittUtils.on('addComponent',addComponent)
</script>
<style scoped>
:deep(.n-base-selection .n-base-selection-label .n-base-selection-input){
  padding: 0px;
}
.componentListCard{
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: gray 0px 0px 5px 1px
}
.componentListCard h2{
  color: black;
  font-size: 4em;
  text-shadow: 2px 2px pink;
  z-index:1
}
.componentListCard::before{
  content:"";
  left:20%;
  position: absolute;
  width: 120px;
  height:120%;

  background:
  linear-gradient(#00ccff,#d500f9);
}
.componentListCard::after{
  content:"";
  position: absolute;
  inset:5px;
  border-radius: 20px;
  background-color:var(--n-color)
}
.componentListCard::before{
  overflow: hidden;
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
</style>